<template>
  <div>
    <div class="revenue">
      <div class="revenue-main">
        <div class="revenue-main-lef">
          <span class="revenue-title">
            客户下单报表
            <el-button style="margin-left: 5px;" size="mini" @click="">{{ $t('btn.reload') }}</el-button>
          </span>
          <jc-table
            :table-data="tableData"
            :table-header="tableHeader"
            table-height="300px"
          />
          <div style="margin-top: 5px;">
            <jc-pagination
              :total="total"
              :page.sync="pageNum"
              :limit.sync="pageSize"
              @pagination=""
            />
          </div>
        </div>
        <div class="revenue-main-rig">
          <span class="revenue-title">
            销售业绩报表
            <el-button style="margin-left: 5px;" size="mini" @click="">{{ $t('btn.reload') }}</el-button>
          </span>
          <jc-table
            :table-data="tableData2"
            :table-header="tableHeader2"
            table-height="300px"
          />
          <div style="margin-top: 5px;">
            <jc-pagination
              :total="total2"
              :page.sync="pageNum2"
              :limit.sync="pageSize2"
              @pagination=""
            />
          </div>
        </div>
      </div>
    </div>
    <div style="background: white;padding: 5px;margin-top: 10px;">
      <div class="options">
        <div style="padding: 5px">产品销售排行报表</div>
        <div>
          <el-input v-model="pevent" size="mini" style="width: 168px;margin-right: 5px;" />
          <el-button type="primary" size="mini" @click="">搜索</el-button>
        </div>
      </div>
      <jc-table
        serial
        :table-data="tableData4"
        :table-header="tableHeader4"
        table-height="400px"
      />
      <div style="margin-top: 5px;">
        <jc-pagination
          :total="total4"
          :page.sync="pageNum4"
          :limit.sync="pageSize4"
          @pagination="headlines"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      pageNum: 1,
      pageSize: 20, // 客户下单
      tableData: [],
      tableHeader: [
        { label: this.$t('market.customerNo'), prop: '' },
        { label: '客户名称', prop: '' },
        { label: '下单金额', prop: '' },
        { label: '利润金额', prop: '' },
        { label: '客户排名', prop: '' },
        { label: '利润排名', prop: '' }
      ],
      total2: 0,
      pageNum2: 1,
      pageSize2: 20, // 销售业绩
      tableData2: [],
      tableHeader2: [
        { label: '业务员', prop: '' },
        { label: '业绩金额', prop: '' },
        { label: '创造利润', prop: '' },
        { label: '业绩排名', prop: '' },
        { label: '同期销售', prop: '' },
        { label: '完成任务比例', prop: '' }
      ],
      total4: 0,
      pageNum4: 1,
      pageSize4: 20,
      pevent: '',
      tableData4: [],
      tableHeader4: [
        { label: '产品图片', prop: '' },
        { label: this.$t('market.productNo'), prop: '' },
        { label: this.$t('market.productmolde'), prop: '' },
        { label: '现销售数量', prop: '' },
        { label: this.$t('market.salerAmount'), prop: '' },
        { label: '去年同期销售数量', prop: '' },
        { label: '去年同期销售金额', prop: '' },
        { label: '去年销售总数量', prop: '' },
        { label: '去年销售总金额', prop: '' },
        { label: '数量同期比例', prop: '' },
        { label: '产品销售排行', prop: '' }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.options {
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between;
}
.revenue {
  padding: 0 5px 15px;
  margin-top: 10px;
  display: flex;
  background-color: white;
  flex-direction: column;
  &-title {
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    position: relative;
    .btnTig {
      position: absolute;
      right: 0;
    }
  }
  &-main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-flow: nowrap;
    .revenue-main-lef {
      width: 49.8%;
    }
    .revenue-main-rig {
      width: 49.8%;
      .column {
        width: 100%;
        height: 200px;
      }
    }
  }
}
</style>

